<template>
  <div class="m7-select-echo">
    <el-tag
      class="select-echo-tag"
      v-for="(item, index) in propValue"
      :key="index"
      size="mini"
      type="info"
      >
      <span class="el-select__tags-text tag-max">{{item | getTagName(optionsArr)}}</span>
    </el-tag>
  </div>
</template>

<script lang="ts">
// 此组件用于多选&&disabeld&&被折叠，无法看到所有选项的组件替换
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component({
  name: 'm7SelectEcho',
  filters: {
    getTagName (val, arr) {
      let str = ''
      arr.some((item: any) => {
        if (item.value === val) {
          str = item.label
        }
      })
      return str
    }
  }
})
export default class M7SelectEcho extends Vue {
  @Prop({
    type: Object,
    default: () => {
      return { label: 'label', value: 'value' }
    }
  }) public defaultProps: any // key和value匹配的值

  @Prop({
    type: Array,
    default: () => {
      return []
    }
  }) public options: any // 下拉的option，用于匹配name

  @Prop({
    type: Array,
    default: () => {
      return []
    }
  }) public propValue: any // 当前选中的数组

  get optionsArr () {
    const label = this.defaultProps.label
    const value = this.defaultProps.value
    const options = this.options
    return options.map((item: any) => {
      return { label: item[label], value: item[value], disabled: item.disabled }
    })
  }
}
</script>
<style scoped lang="stylus">
.select-echo-tag
  display inline-block
  margin-right 6px
  align-items center
.tag-max
  max-width 8em
  display inline-block
  text-overflow ellipsis
  overflow hidden
  white-space nowrap
.m7-select-echo
  border-radius 4px
  border 1px solid #DCDFE6
  padding 6px 6px 2px
  line-height normal
  background-color #f5f7fa
  cursor not-allowed
  min-height 32px
</style>
